<template>
	<transition name="move">
	<div v-show="showflag" class="ff-food" ref="fla">
		<div>
		<div class="ff-content">
			<div class="img-header">
				<img :src="food.image" />
				<div class="back">
					<i class="i" @click="ret">return</i>
				</div>
			</div>
			<div class="ff-text">
				<h1 class="te-title">{{food.name}}</h1>
				<div class="te-detail">
					<span class="sell-count">月售{{food.sellCount}}份</span><span class="rating">好评率{{food.rating}}%</span>
				</div>
				<div class="ff-price">
				    <span class="g-new">￥{{food.price}}</span>
				    <span class="g-old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
				</div>
				 <div class="cart-wraper">
		    	<change :food="food"></change>
		    </div>
		    <div class="buy" v-show="!food.count || food.count==0" @click="addfirst">加入购物车</div>
			</div>
		</div>
		<split v-show="food.info"></split>
		<div class="inf" v-show="food.info">
			<h1 class="inf-title">商品信息</h1>
			<p class="inf-text">{{food.info}}</p>
		</div>
		<split></split>
		<div class="s-rating">
			<h1 class="s-title">商品评价</h1>
			<ratingselect :selectType="selectType" :onlyContent="onlyContent" :desc="desc" :rating="food.ratings"></ratingselect>
		</div>
		</div>
	</div>
	</transition>
</template>

<script>
	import ratingselect from '../shopcart/ratingselect'
	import split from '../shopcart/split'
	import BScroll from 'better-scroll'
	import change from '../shopcart/change'
	const ALL=2;
	export default{
		data(){
			return{
				showflag:false,
				selectType:ALL,
				onlyContent:true,
				desc:{
					all:'全部',
					positive:'推荐',
					negative:'吐槽'
				}
			}
		},
		props:['food'],
		methods:{
			addfirst:function(event){
				if(!event._constructed){
	    			return;
	    		}
				this.$set(this.food,'count',1);
			},
			show:function(){
				this.selectType=ALL;
				this.onlyContent=true;
				this.showflag=true;
				this.$nextTick(function(){
					if(!this.scroll){
						console.log("123");
						this.scroll=new BScroll(this.$refs.fla,{
							click:true
						});
					}
					else {
						this.scroll.refresh();
					}
				});
			},
			ret:function(){
				this.showflag=false;
			}
		},
		components:{
			change,
			split,
			ratingselect
		}
	}
</script>

<style>
	.ff-food{
		position: fixed;
		left: 0;
		top: 0;
		bottom: 48px;
		z-index: 30;
		width: 100%;
		background: #FFFFFF;
	}
	.move-enter-active,.move-leave-active{
		transition: all 0.3s linear; 
	}
	.move-enter,.move-leave-to{
		transform: translateX(100%);
	}
	.img-header{
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 100%;
		
	}
	.img-header img{
		position:absolute ;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.back{
		position: absolute;
		top: 10px;
		left: 0;
		
	}
	.i{
		display: block;
		padding: 10px;
		font-size: 20px;
		color: white;
		
	}
	.ff-text{
		position: relative;
		padding: 18px ;
	}
	.te-title{
		line-height: 14px;
		margin-bottom: 8px;
		font-size: 14px;
		font-weight: 700;
		color: rgb(7,17,27);
	}
	.te-detail{
		margin-bottom: 18px;
		line-height: 10px;
		font-size: 0;
		height: 10px;
	}
	.sell-count,.rating{
		font-size: 10px;
		color: rgb(147,153,159);
		margin-right: 12px;
	}
	.g-new{
		margin-right: 8px;
		font-size: 14px;
		color: rgb(240,20,20);
		
	}
	.g-old{
		text-decoration: line-through;
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.cart-wraper{
		position: absolute;
		right: 12px;
		bottom: 12px;
	}
	.buy{
		position: absolute;
		right: 11px;
		bottom: 11px;
		z-index: 10;
		line-height: 35px;
		padding: 5px,12px;
		box-sizing: border-box;
		border-radius:12px ;
		font-size: 15px;
		color: #FFFFFF;
		background: rgb(0,160,220);
	}
	.inf{
		padding: 18px;
		
	}
	.inf-title{
		line-height:14px ;
		margin-bottom: 6px;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.inf-text{
		line-height: 24px;
		padding:0 8px ;
		font-size: 12px;
		color: rgb(77,85,93);
	}
	.s-rating{
		padding-top:18px ;
	}
	.s-title{
		line-height: 14px;
		font-size: 14px;
		color: rgb(7,17,27);
		margin-left:18px ;
	}
</style>